<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>考神驾到手机站模拟考试界面</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
<link rel="stylesheet" type="text/css" href="css/public.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/windowsheight.js"></script>

    <script src="${pageContext.request.contextPath}/manager_page/layui/layui.js"></script>
    <style type="text/css">
        .green_bg{
            background-color: #01a474;
        }
        .fix_bottom{
            position: fixed;
            width: 100%;
            bottom: 0;
        }

        .mymoresost_con{ width:97.5%; margin:0 auto; height: 294px;overflow-y: scroll;background-color: #e9e9e9;}
        .mymoresost_con span{ width:20%; float:left; font-size:1em; overflow:hidden;}
        .mymoresost_con span a{ width:92.94871794871795%; display:block; height:30px; margin:5px auto; line-height:30px; border:1px solid #e0e0e0; text-align:center;text-decoration: none;color: DimGray;}

    </style>
</head>

<body>

<input type="hidden" id="question_class_hide" value=${param.question_class_hide} >

<input type="hidden" id="cost_time" value="01:00">

<!-----------头部开始--------------->
<%@ include file="page_head.jsp"%>
<!-----------头部结束--------------->
<!-----------内容开始--------------->
 <div class="content">
   <div class="test_bigtitle width610"><a id="to_submit_test" href="javascript:to_submit_test(false);" class="submit_test fr">提交试卷</a><img src="images/libg_06.jpg"><p>考试时间<b> <b id="hh">00</b>:<b id="mm">00</b>:<b id="ss">00</b></b></p></div>
     <div class="testcontent">
         <div class="width610">
             <p class="title_test" ><label id="question_content">题干</label><span id="many_or_not">[单选题]</span></p>
             <div id="question_img_div"><img id="question_img" class="testimg" src="#"/></div>

             <%--         视频--%>
             <div id="question_video_div">

             </div>

             <ul class="option_test" id="question_option_ul">

             </ul>
             <a id="confrim_link" href="javascript:confrim_answer();" class="checkbutton">确认</a>
         </div>
     </div>
     <br>
     <div class="test_buttons width610 scroll_yes">
         <div class="anwser_right green_bg" hidden="hidden" id="answer_feedback_right">答对了，请点击下一题</div>
         <div class="anwser_right" hidden="hidden" id="answer_feedback_wrong">答错了，标准答案是：C</div>
         <br>
         <div class="abouttest_button">
             <p class="goin_next"><input id="next_checkbox" type="checkbox" value=""/><span onclick="change_next_checkbox()">答对自动下一题</span></p>
<%--             答案--%>
             <label hidden="hidden" id="question_answer"></label>
             <div class="clear"></div>
         </div>
         <br>
         <p class="test_pre_next"><a href="javascript:last_question();" class="cant_click"> << 上一题 </a><span><b id="current_index">1</b>/<b id="total_index">10</b></span><a href="javascript:next_question();"> 下一题 >> </a></p>
         <%--        <div class="shownow">对： 0 题&nbsp;&nbsp;&nbsp;&nbsp;错：1题&nbsp;&nbsp;&nbsp;&nbsp;正确率：0.00%</div>--%>
         <br><br><br><br>
     </div>

     <div id="did_bottom_div" class="fix_bottom">
         <div class="shownow" > 对： <label id="pass_question_num">0</label> 题&nbsp;&nbsp;&nbsp;&nbsp;错：<label id="fail_question_num">0</label>题&nbsp;&nbsp;&nbsp;&nbsp;正确率：<label id="pass_percent">0</label>%
             <div style="float: right;margin-right: 25px;" onclick="showNumMenu()"><img src="../my_image/logo_menu.png" width="15" height="15" style="padding-top: 5px;"> <label id="current_index_bottom">1</label>/<label id="total_index_bottom">0</label></div>
         </div>

         <div class="mymoresost_con" id="num_array_div" hidden="hidden">

         </div>
     </div>
  
      
 </div>
 <!-----------内容结束--------------->
<%-- <div class="footer">--%>
<%--   <p>©考神驾到版权所有</p>--%>
<%--   <span>www.kaoshenjiadao.com</span>--%>
<%-- </div>--%>
 
</body>

<script>

    var layer;
    layui.use('layer',function (){
        layer=layui.layer;
    })
    var timer;

    var question_class_hide=$("#question_class_hide").val();
    if(question_class_hide=="科一"){
        $("#page_head_title").text("科一模拟考试");
    }else{
        $("#page_head_title").text("科四模拟考试");
    }

    var all_data;//question对象数组
    var current_index=0;
    var chapter_count_array;
    var count_total=10;//整数，考试总体数
    var question_history=[];//数组，用来保存做题痕迹
    var flag_menunum=false;
    var num_menu_array=[];

    var count_right=0;//记录考试做对的题
    var count_fail=0;//记录考试做错的题
    window.onload=function(){
        startTime();


        //根据不同的参数，初始化所有的试题数据
        $.ajax({
            url:"${pageContext.request.contextPath}/front_question/real_test_init.do",
            data:{
                "question_class":$("#question_class_hide").val(),
            },
            success:function(data,status){
                if(status=="success"){
                    all_data=data.data;
                    current_index=0;
                    count_total=10;//考试总题数
                    for(var i=0;i<all_data.length;i++){
                        question_history.push({
                            flag_make:false,
                            option_num:"0"
                        })

                        num_menu_array.push(-1);
                    }
                    changeQuestion(current_index);


                    $("#total_index").text(all_data.length);
                    $("#total_index_bottom").text(all_data.length);
                }
            }
        })
    }

    function changeQuestion(index){
        if(index>=0){

            //初始化的一些操作
            $("#question_video_div").empty();


            var index_tool=index+1;
            var question_content_str=index_tool+"、";
            question_content_str+=all_data[index].question_content.substring(2,all_data[index].question_content.length);

            //修改试题题干、章节等开始
            $("#question_content").text(question_content_str);
            $("#question_answer").text(all_data[index].question_answer);
            //修改试题题干、章节等结束

            var question_answer=all_data[index].question_answer;

            //显示图片开始
            var question_img=all_data[index].question_img;
            var img_path="${pageContext.request.contextPath}/img_artificial/"+"question_img/";
            if(question_img!=""){
                // <img id="question_img" class="testimg" src="#"/>
                $("#question_img_div").empty();
                var img=$("<img/>").attr({
                    "id":"question_img",
                    "class":"testimg",
                    "src":img_path+question_img
                });
                $("#question_img_div").append(img);
            }else{
                $("#question_img_div").empty();
            }
            //显示图片结束

            //显示视频开始
            var question_video=all_data[index].question_video;
            if(question_video!=""){

                var dot_index=question_video.indexOf(".");
                var src_path_head=img_path+question_video.substring(0,dot_index);
                var end_str=["mp4","ogg","webm","swf"];
                var video=$("<video></video>").attr({
                    "id":"question_video",
                    "controls":"controls",
                    "autoplay":"autoplay",
                    "loop":"loop"
                })
                for(var i=1;i<=3;i++){
                    var source=$("<source/>").attr({
                        "src":src_path_head+"."+end_str[i-1],
                        "type":"video/"+end_str[i-1]
                    })
                    video.append(source);
                }
                var object=$("<object></object>").attr({
                    "data":src_path_head+".mp4",
                    "width":"320",
                    "height":"240"
                });
                var embed=$("<embed/>").attr({
                    "src":src_path_head+".swf",
                    "width":"320",
                    "height":"240"
                })
                object.append(embed);
                video.append(object);
                $("#question_video_div").append(video);

                changeQuestion_video_size();

            }
            //显示视频结束

            //创建试题选项开始
            $("#question_option_ul").empty();
            var input_array=[];
            var option_array=all_data[index].question_option.split("\n");
            if(option_array.length==2){
                $("#many_or_not").text("[判断题]");
                createCheck_one(option_array, input_array);
            }else {
                if (question_answer.length == 1) {
                    $("#many_or_not").text("[单选题]");
                    createCheck_one(option_array, input_array);
                }else{
                    $("#many_or_not").text("[多选题]");
                    createCheck_many(option_array, input_array);
                }
            }
            //创建试题选项结束

        }else{
            layer.msg("这已经是第一题了");
        }

        $("#answer_feedback_right").attr("hidden","hidden");
        $("#answer_feedback_wrong").attr("hidden","hidden");
        $("#confrim_link").attr("href","javascript:confrim_answer();");

        if(question_history[index].flag_make){
            var check_array=$("#question_option_ul li input");
            var check_link=$("#question_option_ul li p a");
            for(var i=0;i<check_array.length;i++){
                check_array[i].disabled="disabled";
                check_array[i].checked=false;
            }
            for(var i=0;i<check_link.length;i++){
                check_link[i].href="javascript:;";
            }
            var option_num_str=question_history[index].option_num;
            var your_answer="";
            for(var i=0;i<option_num_str.length;i++) {
                var id = "#option" + option_num_str.charAt(i);
                $(id).attr("checked", true);
                your_answer+=$(id).val();
            }
            if(your_answer==all_data[index].question_answer){
                $("#answer_feedback_right").removeAttr("hidden");
            }else{
                $("#answer_feedback_wrong").removeAttr("hidden");
                $("#answer_feedback_wrong").text("答错了，正确答案为："+all_data[index].question_answer);
            }
            $("#confrim_link").removeAttr("href");
        }
    }

    function createCheck_one(option_array,input_array){
        for (var i = 0; i < option_array.length; i++) {
            var li = $("<li></li>");
            var j = i + 1;
            var input = $("<input/>").attr({
                "id": "option" + j,
                "type": "checkbox"
            }).val(option_array[i].substring(0, 1));
            input_array.push(input);
            var p = $("<p></p>");
            var a = $("<a></a>").attr("href", "javascript:option_check(" + j + ",+" + option_array.length + ");").text(option_array[i]);
            p.append(a);
            li.append(input, p);
            $("#question_option_ul").append(li);
        }
        if (input_array.length == 4) {
            input_array[0].click(function () {
                uncheck_other(1, 4);
            })
            input_array[1].click(function () {
                uncheck_other(2, 4);
            })
            input_array[2].click(function () {
                uncheck_other(3, 4);
            })
            input_array[3].click(function () {
                uncheck_other(4, 4);
            })
        } else {
            if (input_array.length == 3) {
                input_array[0].click(function () {
                    uncheck_other(1, 3);
                })
                input_array[1].click(function () {
                    uncheck_other(2, 3);
                })
                input_array[2].click(function () {
                    uncheck_other(3, 3);
                })
            } else {
                input_array[0].click(function () {
                    uncheck_other(1, 2);
                })
                input_array[1].click(function () {
                    uncheck_other(2, 2);
                })
            }
        }
    }
    function createCheck_many(option_array,input_array){
        for (var i = 0; i < option_array.length; i++) {
            var li = $("<li></li>");
            var j = i + 1;
            var input = $("<input/>").attr({
                "id": "option" + j,
                "type": "checkbox"
            }).val(option_array[i].substring(0, 1));
            input_array.push(input);
            var p = $("<p></p>");
            var a = $("<a></a>").attr("href", "javascript:option_check_many(" + j + ");").text(option_array[i]);
            p.append(a);
            li.append(input, p);
            $("#question_option_ul").append(li);
        }
    }



    function last_question(){
        if(current_index>0){
            cancelABorder(current_index);
            current_index--;
            changeQuestion(current_index);
            $("#current_index").text(current_index+1);
            $("#current_index_bottom").text(current_index+1);
        }else{
            layer.msg("这已经是第一题了");
        }
    }
    function next_question(){
        if(current_index<count_total-1) {
            cancelABorder(current_index);
            current_index++;
            changeQuestion(current_index);
            $("#current_index").text(current_index+1);
            $("#current_index_bottom").text(current_index+1);
        }else{
            layer.msg("这已经是最后一题了");
        }
    }


    function uncheck_other(num,length){
        for(var i=1;i<=length;i++){
            var id_tool="option"+i;
            if(i!=num){
                document.getElementById(id_tool).checked=false;
            }
        }
    }

    function option_check(num,length){
        var id="option"+num;
        var check=document.getElementById(id).checked;
        if(check){
            document.getElementById(id).checked=false;
        }else{
            document.getElementById(id).checked=true;
        }
        for(var i=1;i<=length;i++){
            var id_tool="option"+i;
            if(i!=num){
                document.getElementById(id_tool).checked=false;
            }
        }
    }

    function option_check_many(num){
        var id="option"+num;
        var check=document.getElementById(id).checked;
        if(check){
            document.getElementById(id).checked=false;
        }else{
            document.getElementById(id).checked=true;
        }
    }

    function confrim_answer(){

        $("#answer_feedback_right").attr("hidden","hidden");
        $("#answer_feedback_wrong").attr("hidden","hidden");

        var check_array=$("#question_option_ul li input");
        var check_link=$("#question_option_ul li p a");
        var flag=true;
        var j_str="";
        var j;
        var i;
        var your_answer="";
        var flag_choose=false;
        var question_answer=$("#question_answer").text();
        if(question_answer.length==1) {
            for ( i = 0; i < check_array.length; i++) {
                if (check_array[i].checked) {
                    if (check_array[i].value != question_answer) {
                        flag = false;
                    }
                    flag_choose=true;
                    j=i+1;
                    j_str+=j;
                    break;
                }
            }
        }else{
            for ( i = 0; i < check_array.length; i++) {
                if (check_array[i].checked) {
                    your_answer+=check_array[i].value;
                    j=i+1;
                    j_str+=j;
                    flag_choose=true;
                }
            }
            if(your_answer!=question_answer)
                flag=false;
        }
        if(!flag_choose){
            layer.msg("您还没有选择");
        }else {
            //确认后无法再次选择
            for(var i=0;i<check_array.length;i++){
                check_array[i].disabled="disabled";
            }
            for(var i=0;i<check_link.length;i++){
                check_link[i].href="javascript:;";
            }
            $("#confrim_link").removeAttr("href");
            question_history[current_index].flag_make=true;
            question_history[current_index].option_num=j_str;

            var flag_pass=1;
            var question_id=all_data[current_index].question_id;
            var question_class=$("#question_class_hide").val();
            var question_chapter=$("#question_chapter_hide").val();
            if (flag) {
                //答对
                $("#answer_feedback_right").removeAttr("hidden");
                count_right++;
            } else {
                //答错
                flag_pass=0;
                $("#answer_feedback_wrong").removeAttr("hidden");
                $("#answer_feedback_wrong").text("答错了，正确答案为："+question_answer);
                count_fail++;
            }

            var map={
                "pass_num":parseInt($("#pass_question_num").text()),
                "fail_num":parseInt($("#fail_question_num").text()),
                "pass_percent":parseFloat($("#pass_percent").text())
            };
            if(flag_pass==0){
                map.fail_num++;
                num_menu_array[current_index]=0;
            }else{
                map.pass_num++;
                num_menu_array[current_index]=1;
            }
            map.pass_percent=0.0;
            if(map.pass_num!=0||map.fail_num!=0) {
                map.pass_percent = (map.pass_num) / (map.pass_num + map.fail_num);
                map.pass_percent*=100;
                map.pass_percent=Math.round(map.pass_percent*10)/10;
            }
            // alert(map.pass_num);
            // alert(map.fail_num);
            changeFlag_pass_count(map);
            changeCurrentA(current_index);
            if(flag){
                if($("#next_checkbox").attr("checked")){
                    next_question();
                }
            }
        }
    }

    function changeFlag_pass_count(data){
        var pass_num=data.pass_num;
        var fail_num=data.fail_num;
        var pass_percent=data.pass_percent;
        $("#pass_question_num").text(pass_num);
        $("#fail_question_num").text(fail_num);
        $("#pass_percent").text(pass_percent);
    }


    function change_next_checkbox(){
        if($("#next_checkbox").attr("checked")){
            $("#next_checkbox").attr("checked",false);
        }else{
            $("#next_checkbox").attr("checked",true);
        }
    }

    function changeQuestion_video_size(){
        var w=$(window).width()*0.95;
        $("#question_video").attr({
            "width":w,
            "height":170
        });
    }

    window.addEventListener("resize", function(){
        changeQuestion_video_size();
    });


    function to_submit_test(flag_time_up){

        var flag_pass="yes";
        var test_score=Math.round((count_right/count_total)*100);
        if(test_score<60){
            flag_pass="no";
        }
        if(!flag_time_up) {
            if (count_right + count_fail < count_total) {
                layer.confirm('您还没有答完，确认提交？', {
                    btn: ['确定', '取消']
                    , yes: function (index) {
                        showResult(flag_pass,test_score);
                        // saveTest(test_score);
                        layer.close(index);
                    }
                    , btn2: function () {

                    }
                })
            }else{
                showResult(flag_pass,test_score);
                // saveTest(test_score);
            }
            clearInterval(timer);
        }else{
           showResult(flag_pass,test_score);
            // saveTest(test_score);
        }
    }

    function showResult(flag_pass,test_score){
        var w=$(window).width()*0.8;
        var h=$(window).width()*0.75;
        layer.open({
            type: 2,
            title: '考试结果',
            area: [w + 'px', h + 'px'],
            shadeClose:true,
            content: "kemu1_test_right.jsp?flag_pass=" + flag_pass + "&test_score_hidden=" + test_score +
                "&cost_time_hidden=" + $("#cost_time").val()
            ,end:function(){
                saveTest(test_score);
            }
        });
        $("#to_submit_test").attr("href", "javascript:;");

    }
    function saveTest(grade){
        $.ajax({
            url:"${pageContext.request.contextPath}/front_test_real/save_test.do",
            data:{
                "question_class":$("#question_class_hide").val(),
                "grade":grade,
                "finish_time":$("#cost_time").val()
            },
            success:function (data,status){
                if(status=="success"){
                    layer.msg("考试记录已保存",{icon:1});
                }
            }
        })
    }


    //答题卡有关
    function showNumMenu(){
        if(!flag_menunum) {
            initNumMenu();
            flag_menunum = true;
        }
        if(!$("#num_array_div").attr("hidden")){
            $("#num_array_div").attr("hidden",true);
        }else{
            $("#num_array_div").removeAttr("hidden");
            changeCurrentA(current_index);
            document.getElementById("num_array_div").scrollTop=0;
            document.getElementById("num_array_div").scrollTop+=Math.floor((current_index+1)/5)*42;
        }
    }

    function initNumMenu(){
        $("#num_array_div").empty();
        for(var i=0;i<all_data.length;i++){
            var span=$("<span></span>");
            var j=i+1;
            var a=$("<a></a>").attr({
                "id":"span_a"+j,
                "href":"javascript:changeIndex("+i+");"
            }).text(j+"");
            if(num_menu_array[i]==0){
                a.attr("style","width:92.94871794871795%; display:block; height:30px; margin:5px auto; line-height:30px; border:1px solid #e0e0e0; text-align:center;text-decoration: none;color: DimGray;background-color: #ff6600;");
            }else{
                if(num_menu_array[i]==1)
                    a.attr("style","width:92.94871794871795%; display:block; height:30px; margin:5px auto; line-height:30px; border:1px solid #e0e0e0; text-align:center;text-decoration: none;color: DimGray;background-color: #01a474;");
            }
            span.append(a);
            $("#num_array_div").append(span);
        }
    }
    function changeIndex(index){

        // changeCurrentA(index);
        cancelABorder(current_index);
        current_index=index;
        $("#current_index").text(index+1);
        $("#current_index_bottom").text(index+1);
        $("#num_array_div").attr("hidden",true);
        changeQuestion(index);
        // updateHistory_index(index);
    }
    function changeCurrentA(index){
        var tool=index+1;
        if(num_menu_array[index]==-1)
            $("#span_a"+tool).attr("style","width:92.94871794871795%; display:block; height:30px; margin:5px auto; line-height:30px; border:1px solid Aqua; text-align:center;text-decoration: none;color: Aqua;");
        else{
            if(num_menu_array[index]==0){
                $("#span_a"+tool).attr("style","width:92.94871794871795%; display:block; height:30px; margin:5px auto; line-height:30px; border:1px solid Aqua; text-align:center;text-decoration: none;color: Aqua;background-color: #ff6600;");
            }else{
                $("#span_a"+tool).attr("style","width:92.94871794871795%; display:block; height:30px; margin:5px auto; line-height:30px; border:1px solid Aqua; text-align:center;text-decoration: none;color: Aqua;background-color: #01a474;");
            }
        }
    }
    function cancelABorder(index){
        var tool=index+1;
        if(num_menu_array[index]==-1)
            $("#span_a"+tool).attr("style","width:92.94871794871795%; display:block; height:30px; margin:5px auto; line-height:30px; border:1px solid #e0e0e0; text-align:center;text-decoration: none;color: DimGray;");
        else{
            if(num_menu_array[index]==0){
                $("#span_a"+tool).attr("style","width:92.94871794871795%; display:block; height:30px; margin:5px auto; line-height:30px; border:1px solid #e0e0e0; text-align:center;text-decoration: none;color: DimGray;background-color: #ff6600;");
            }else{
                $("#span_a"+tool).attr("style","width:92.94871794871795%; display:block; height:30px; margin:5px auto; line-height:30px; border:1px solid #e0e0e0; text-align:center;text-decoration: none;color: DimGray;background-color: #01a474;");
            }
        }
    }






















    function startTime(){
            var h=0;
            var m=3;
            var s=0;
            var count=h*3600+m*60+s;
            var cost=0;

            timer=setInterval(function(){
                count--;
                cost++;
                if(count>=0) {
                    $("#hh").text(showNum(Math.floor(count / 3600)));
                    $("#mm").text(showNum(Math.floor((count / 60)%60)));
                    $("#ss").text(showNum(count % 60));

                    var hh=Math.floor(cost / 3600);
                    var mm=showNum(Math.floor((cost / 60)%60));
                    var ss=showNum(cost % 60);
                    if(hh==0&&mm==0)
                      $("#cost_time").val(ss+"秒")
                    else{
                        if(mm!=0)
                            $("#cost_time").val(mm+"分"+ss+"秒");
                        else
                            $("#cost_time").val(hh+"时"+mm+"分"+ss+"秒");
                    }
                    if(count==30){
                        layer.msg("时间还剩30秒，请尽快答题");
                    }
                }else{
                    layer.open({
                        title:'信息'
                        ,content:'时间到了，即将提交试卷'
                        ,time:3000
                        ,end:function (){
                            to_submit_test(true);
                        }
                    })

                    clearInterval(timer);
                }
            },1000);
    }
    function showNum(num){
        if(num<10)
            return '0'+num;
        return num;
    }
</script>










<!--考试页js-->
<script>
 $(".thisexplain").click(function(){
	 $(".explain_tan").show();
	 })
 $(".close").click(function(){
	 $(".explain_tan").hide();
	 })
</script>
<!--考试页js-->
<!--头部高度赋给列表的topjs-->
<script>
   var heighttop=$(".top").height();
   $(".topmenu").css("top",heighttop);
    $(".menumore").toggle(function(){
	     $(".topmenu").show(); 
	   },function(){
	     $(".topmenu").hide(); 
	 	   })
   $(".buttontop").click(function(){
	     $(".topmenu").hide();  
	   })
	   
 $(function(){
	 $(".tasecartop span a").click(function(){
		  var $banktip=$(this).attr("tip");
		  $($banktip).show().siblings().hide();
		  $(".tasecartop span a").removeClass("payaclik");
		  $(this).addClass("payaclik");
		 })
	
	})
 </script>
 
<!--头部高度赋给列表的topjs-->
<!--banner将图片的高度赋给父级扪js-->
<script>
   var heighta=$("###incltialiu li:eq(0) img").height();
   $(".main,.width,###incltialiu").height(heighta) ;
 </script>
 <!--banner将图片的高度赋给父级扪js-->
<!--首页标题点击出现更多分类js-->
 <script>
	$(".titlemore").toggle(function(){
		$(this).parent(".tabtila").siblings(".moresort").show()
		$(this).children("img").attr("src","images/title_692.jpg")
		},function(){
		$(this).parent(".tabtila").siblings(".moresort").hide()
		$(this).children("img").attr("src","images/title_69.jpg")
		})
  </script>
 <!--首页标题点击出现更多分类js-->
</html>
